/*
 * @Description:
 * @Author:
 * @Date: 2024-10-05 11:59:52
 * @LastEditTime: 2024-10-06 09:17:24
 * @LastEditors: XXX
 */
import XsUser from "./user.js"
console.log(123456789)
class XsDemo1 extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  connectedCallback () {
    this.render()
  }

  render () {
    const dataset = this.dataset

    const box = document.createElement('div')
    box.innerHTML = `
      <div class="xs-artical">
        <div class="xs-artical__img">
          <img src="${dataset.picture}">
        </div>

        <xs-user
          data-avatar="${dataset.avatar}"
          data-name="宇宙小百科"
          data-time="2024-12-12"
          data-location="陕西">
        </xs-user>

        <div class="xs-artical__desc">${dataset.desc}</div>
      </div>
    `

    const styles = document.createElement('style')
    styles.innerHTML = `
      :host {
        display: inline-block;
        border: 3px solid red;
        box-sizing:border-box;
        width:50vw;
      }

      :host([green]) {
        border-color: green;
      }

      // :host {
      //   all: initial;
      // }

      .xs-artical {
        margin: 30px;
        padding: 15px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        overflow: hidden;
      }

      .xs-artical__img {
        margin-top: -30px;
        margin-right: -30px;
        margin-left: -30px;
      }

      .xs-artical__img img {
        width: 100%;
        display: block;
      }

      .xs-artical__desc {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 15px;
      }
    `

    this.shadowRoot.appendChild(box)
    this.shadowRoot.appendChild(styles)
  }

  avatarAddBorder () {
    this.shadowRoot.querySelector('xs-user').addBorder()
  }

  changeBackgroudColor () {
    const articalDom = this.shadowRoot.querySelector('.xs-artical')
    if (articalDom) {
      articalDom.style.backgroundColor = 'rgba(219, 165, 0, 0.1)'
    }
  }
}

customElements.define('xs-demo1', XsDemo1)

export default XsDemo1
